<template>
  <div class="layout-padding-auto">
    <el-table :data="dataList" v-loading="state.loading" border :fit="true" style="width:100%;height: 100%;"
      :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
      <el-table-column prop="materialCode" :label="$t('iot.materialCode')" show-overflow-tooltip />
      <el-table-column prop="materialName" :label="$t('iot.materialName')" show-overflow-tooltip />
      <el-table-column prop="qty" :label="$t('iot.qty')" show-overflow-tooltip >
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag type="warning" effect="plain">
            {{ scope.row.qty }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="checkItemName" :label="$t('qms.testItem')" show-overflow-tooltip />
      <el-table-column prop="standardItem" :label="$t('qms.standardValue')" show-overflow-tooltip />
      <el-table-column prop="unit" :label="$t('iot.unit')" show-overflow-tooltip />
      <el-table-column prop="checkResult" :label="$t('qms.testResult')" show-overflow-tooltip>
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag  :type="scope.row.type == 1 ? 'success' : 'danger'">
            {{ scope.row.checkResult }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="supportImage" :label="$t('qms.supportingInformation')" show-overflow-tooltip>
        <template #default="scope">
          <el-button icon="view" type="primary" plain @click="clickPreviewImage(scope.row.supportImage)"
            v-if="scope.row.supportImage">{{ $t('qms.Preview') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    <div class="demo-image__preview">
      <el-image-viewer class="el-image-viewer" v-if="showImagePreview" :zoom-rate="1.2" @close="closePreview"
        :url-list="imgPreviewList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {getIqcDPageSet} from "/@/api/platform/qms/qmsCheckReport";

// 搜索变量
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getIqcDPageSet
})

// 计算属性处理state.list
const dataList = computed(() => {
  state.dataList.forEach((item: any) => {
    let value = item.checkResult;
    if (value == 'pass') {
      item.type = 1
    } else if (value == 'fail') {
      item.type = 2
    } else {
      var split = item.standardItem.split("~");
      if (Number(split[0]) <= value && value <= Number(split[1])) {
        item.type = 1
      } else {
        item.type = 2
        item.checkResult = 'fail'
      }
    }
  })
  return state.dataList
})


const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  tableStyle
} = useTable(state)

// 父级点击的行
const parentClickRow = {}

const imgPreviewList = ref([])
const showImagePreview = ref(false)

//点击预览图片
const clickPreviewImage = async (url: string) => {
  let urls = url.split(",");
  showImagePreview.value = true
  imgPreviewList.value = urls
}

const closePreview = () => {
  imgPreviewList.value = []
  showImagePreview.value = false
}


// 搜索变量
const queryRef = ref()

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  getDataList()
}

// 通过id进行子表的查询
const query = (row: Object) => {
  // 赋值查询参数
  state.queryForm.FQCId = row.id
  // 保存选中的行数据
  Object.assign(parentClickRow, row)
  // 刷新子表数据
  getDataList()

}

// 暴露变量
defineExpose({
  resetQuery,
  query
});

</script>

<style scoped lang="scss"></style>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

::v-deep(.el-table__cell) {
  position: static !important;
}

::v-deep(.el-image-viewer__mask) {
  opacity: .7 !important;
}
</style>